<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { getWorkflowTemplateOne } from '@/api/examples'
// import SytPreviewItem from '@/components/SytEditForm/SytPreviewItem.vue'

const props = defineProps({
  data: Object
})

let workflowData: any = ref({
  name: '',
  status: '',
  submitter: {},
  formData: [],
  flowData: []
})

watch(
  () => JSON.parse(JSON.stringify(props.data)),
  async (data) => {
    let formData = data.formData
    let formTemplateData = (await getWorkflowTemplateOne({ name: data.name })).data.formData
    for (let field in formData) {
      getFormItemByField(field, formTemplateData).value = formData[field]
    }
    workflowData.value = data
    workflowData.value.formData = formTemplateData
  },
  {
    deep: true,
    immediate: true //解决第一次打开组件watch不起作用的问题
  }
)
//根据field获取formTemplateData的项
const getFormItemByField = (field, formTemplateData) => {
  for (let item of formTemplateData) {
    if (item.type === 'layout') {
      for (let v of item.cols) {
        for (let element of v.children) {
          if (field === element.field) return element
        }
      }
    } else if (field === item.field) return item
  }
}
//时间线数据
let timeLineData = computed(() => {
  let flowData = workflowData.value.flowData.map((v) => {
    switch (v.status) {
      case '未处理':
        v.color = ''
        break
      case '处理中':
        v.color = ''
        break
      case '通过':
        v.color = '#00aabb'
        break
      case '否决':
        v.color = '#ff0000'
    }
    return v
  })
  flowData.unshift({
    type: '发起人',
    label: workflowData.value.submitter.nickname,
    color: '#00aabb'
  })
  return flowData
})

const ruleFormRef = ref()
</script>

<template>
  <el-space direction="vertical" fill class="submit-container">
    <el-card>
      <template #header>
        <h1>{{ workflowData.name }}</h1>
      </template>
      <!-- <el-form ref="ruleFormRef" :model="workflowData.formData" disabled>
        <SytPreviewItem
          v-for="(item, index) of workflowData.formData"
          :key="item.field"
          v-model="workflowData.formData[index]"
          :index="index.toString()"
          :rule-form-ref="ruleFormRef"
        />
      </el-form> -->
    </el-card>
    <el-card>
      <template #header>
        <span>流程</span>
      </template>
      <el-timeline>
        <el-timeline-item
          v-for="activity of timeLineData"
          :key="activity.id"
          :color="activity.color"
          :timestamp="activity.timestamp"
        >
          <div>{{ activity.type }}</div>
          <div>{{ activity.label }}</div>
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </el-space>
</template>

<style scoped>
.submit-container {
  display: block;
  width: 70%;
  margin: 0 auto;
}
@media screen and (max-width: 500px) {
  .submit-container {
    width: 100%;
  }
}
</style>
@/api/examples
